<script>
export default {
  name: "cardHints",
  props: {
    // 卡片信息
    info: {
      type: Object,
      default: () => {
        return {}
      }
    },
    index: {
      type: Number,
      default: 0
    },
    length: {
      type: Number,
      default: 0
    }
  },
  methods: {
    anniversariesListPath(){
      this.$emit('anniversariesListPath')
    }
  },
}
</script>

<template>
  <view class="cardHints column justify-between" :style="{
      margin: index == 0 ? '0 10rpx 0 0' : length - 1 == index ?'0 0 0 10rpx' : '0 10rpx'
  }" @click.stop="anniversariesListPath">
    <view class="cardHints_top">
      <view class="cardHints_top_name mt-19 ellipsis-multiline webkit-line-clamp-1">
        <text class="cardHints_top_name_text">{{info.status == 1 ?info.name : info.username + '的生日' }}</text>
      </view>
      <view class="cardHints_top_dateDescription row justify-center items-center mt-8">
        <view class="cardHints_top_dateDescription_left mr-12 column justify-end">
          <text class="cardHints_top_dateDescription_left_text">还有</text>
        </view>
        <view class="cardHints_top_dateDescription_center allRowCenter">
          <text class="cardHints_top_dateDescription_center_text">{{ info.num }}</text>
        </view>
        <view class="cardHints_top_dateDescription_right ml-12 column justify-end">
          <text class="cardHints_top_dateDescription_right_text">天</text>
        </view>
      </view>
    </view>
    <view class="cardHints_bottom allRowCenter" :style="{
      background:info.isBirth ? '#FEDBA0':'#FFCAA6'
    }">
      <text class="cardHints_bottom_text">{{ info.time }}</text>
    </view>
  </view>
</template>

<style scoped lang="scss">
.cardHints {
  width: 270rpx;
  height: 188rpx;
  background: #FFFFFF;
  box-shadow: 0 2rpx 4rpx 1rpx rgba(0, 0, 0, 0.16);
  border-radius: 21rpx 21rpx 21rpx 21rpx;
  //overflow: hidden;

  .cardHints_top {
    margin: 0 24rpx;

    .cardHints_top_name {
      .cardHints_top_name_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #0F0F0F;
      }
    }

    .cardHints_top_dateDescription {
      .cardHints_top_dateDescription_left {
        &_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 22rpx;
          color: #000000;
        }
      }

      .cardHints_top_dateDescription_center {
        &_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 56rpx;
          color: #FF4206;
        }
      }

      .cardHints_top_dateDescription_right {
        &_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 22rpx;
          color: #292929;
        }
      }
    }
  }

  .cardHints_bottom {
    width: 270rpx;
    border-radius: 0 0 21rpx 21rpx;
    padding: 7rpx 0 5rpx 0;

    &_text {
      font-weight: 500;
      font-size: 28rpx;
      color: #4B4B4B;
    }
  }
}
</style>